<template>
  <view class="content">
    <z-paging ref="paging" v-model="listdata" @query="queryList">
      <view class="top-filter-icon" @click="showdatapick">
        <image class="top-icon" src="@/static/images/mine/filter.png"/>
      </view>
      <view style="background-color: #fff;">
        <uni-datetime-picker
            ref="pickerRef"
            @show="showdatapick" v-model="datetimerange" type="daterange" rangeSeparator="至"/>
        <view class="flexrow flex:1" style="justify-content: space-around;margin: 20rpx 100rpx;">
          <view class="mini_blueborder_bluetext_button" @click="onreset">重置</view>
          <view class="mini_bluebg_whitetext_button" @click="onconfirmquery">确定</view>
        </view>
      </view>

      <view v-for="(listitem,index) in listdata" :key="index">
        <uni-list-item class="margin-top-sm" v-if="listitem.packageType === 'sms'">
          <template v-slot:body>
            <view class="flexrow flex1">
              <view class="item-content-left">
                <image class="left-icon" style="margin-top: 10px;" src="@/static/images/mine/text-message.png">
                </image>
              </view>
              <view class="item-content">
                <text class="text-lg ">短信报警 {{listitem.packageNum}}次</text>
                <text class="text-grey text-df margin-top-sm">订单信息: {{ listitem.createTime | dateFomatterYYYYMMDD }}</text>
                <text class="text-grey text-df margin-top-sm">所属机构:{{ listitem.useOrgName }}</text>
                <text class="text-grey text-df margin-top-sm">购买人:{{ listitem.userName }}</text>
              </view>
              <view class="item-content-right">
                <text class="yellow-text">¥{{listitem.orderAmount}}</text>
              </view>
            </view>
          </template>
        </uni-list-item>
        <uni-list-item class="margin-top-xs"  v-else>
          <template v-slot:body>
            <view class="flexrow flex1">
              <view class="item-content-left">
                <image class="left-icon" style="margin-top: 10px;" src="@/static/images/mine/order-phone.png">
                </image>
              </view>
              <view class="item-content">
                <text class="text-lg ">电话报警 {{listitem.packageNum}}次</text>
                <text class="text-grey text-df margin-top-sm">订单信息:{{ listitem.createTime | dateFomatterYYYYMMDD }}</text>
                <text class="text-grey text-df margin-top-sm">所属机构:{{ listitem.useOrgName }}</text>
                <text class="text-grey text-df margin-top-sm">购买人:{{ listitem.userName }}</text>
              </view>
              <view class="item-content-right">
                <text class="yellow-text">¥{{listitem.orderAmount}}</text>
              </view>
            </view>
          </template>
        </uni-list-item>
      </view>

    </z-paging>
  </view>
</template>
<script>
import {
  iotOrderPage
} from "@/api/mine/index"
import dayjs from "dayjs";

export default {
  data() {
    return {
      datetimerange: [],
      listdata: [],
    }
  },
  filters: {
    dateFomatterYYYYMMDD (date) {
      return date ? dayjs(date).format('YYYY-MM-DD HH:mm:ss') : ''
    }
  },
  methods: {
    onconfirmquery() {
      this.queryList(1, 10)
    },
    onreset() {
      this.datetimerange = []
    },
    queryList(pageNo, pageSize) {
      console.log('this.datetimerange>>', this.datetimerange)
      if (pageNo == 1) {
        uni.showLoading({
          title: "请求中...",
        })
      }
      const hms = dayjs().format('hh:mm:ss')
      iotOrderPage({
        size: pageSize,
        pages: pageNo,
        startTime: this.datetimerange.length == 0 ? '' : this.datetimerange[0] + ' ' + hms,
        endTime: this.datetimerange.length == 0 ? '' : this.datetimerange[1] + ' ' + hms
      }).then(res => {
        uni.hideLoading()
        const records = res.data.list || []; // 读取 data 数据
        this.$refs.paging.complete(records);



      })
    },
    showdatapick() {
      console.log('this.$refs.pickerRef', this.$refs.pickerRef)
      this.$refs.pickerRef.show()
    }
  }
}
</script>

<style scoped>
.item-content-left {
  display: flex;
  width: 50px;
  height: 150px
}

.item-content {
  display: flex;
  flex: 1;
  height: 120px;
  flex-direction: column;
}

.item-content-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 50px;
  height: 150px;
}

.yellow-text {
  text-align: center;
  font-size: 14px;
  color: #ffb300
}

.top-filter-icon {
  height: 40px;
  margin-right: 10px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.left-icon {
  width: 40px;
  height: 40px
}

.top-icon {
  margin-top: 10px;
  width: 30px;
  height: 30px
}

page {
  height: 100%;

}

.content {


  height: 100%;
  padding-bottom: calc(var(--window-bottom) + 20px);
}
</style>